<template>
    <div>
        <div class="personal-homepage">
            <div class="user">
                <div class="user_box">
                    <div class="user-box-left" v-if="user.noticeerweima"><van-button type="default" color="#4482e4" size="small" @click="showImg(user.noticeerweima)">接受推送</van-button></div>
                    <div class="user-box-right" v-if="user.wxerweima"><van-button type="default" color="#4482e4" size="small" @click="showImg(user.wxerweima)" >联系作者</van-button></div>
                    <div class="d1" @click="showqrcode()">防失联</div>
                    <div class="img"><img :src="user.avatar"></div>
                    <div class="d2 active" v-if="foucsstatus==1" @click="guanzhu()">取消关注</div>
                    <div class="d2" v-else  @click="guanzhu()">关注</div>
                </div>
                <p class="p1">{{user.nickname}}</p>
                <p class="p2">{{user.bio}}</p>
            </div>
            <div class="user_bar"><div class="number">TA的料({{materialsnumber}})</div></div>
        </div>
        <div class="personal-homepage-list">
            <div class="my-data">
                <ul>

                    <van-list
                            v-model="loading"
                            :finished="finished"
                            finished-text="没有更多了"
                            loading-text="加载中"
                            :immediate-check="false"
                            @load="onLoad"
                    >
                        <li v-for="(item, index) in list">
                            <div class="box-r4" @click="detail(item.id)">
                                <div class="open_icon" v-if="item.isregularpublic==1"><img src="../../assets/img/open_icon.png"></div>
                                <div class="my-data_title">
                                    <div class="top">
                                        <div>
                                            <div class="time">
                                                <!--<i class="i_1" v-if="item.mtype=='1'">红</i>-->
                                                <!--<i class="i_2" v-else-if="item.mtype=='2'">黑</i>-->
                                                <!--<i class="i_3" v-else-if="item.mtype=='3'">走</i>-->
                                                {{item.createtime}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="my-data_title">
                                    <div class="left">
                                        <p v-if="item.mtype=='1'" style="color: #ef4433;font-weight: bold;">
                                            <!--<span class="isreturn" v-if="item.isreturn==1">不对返还</span>-->
                                            <span class="isreturn mr-5" v-if="item.saletype==1">包时{{baodays}}天</span>
                                            <span class="isreturn" style="background-color: #4482E4;border: 0.5px solid #4482E4;" :class="{'isreturnColor': item.isreturn!=1}"  @click.stop="showReturn(item.isreturn)">{{item.isreturn!=1?'【体育资讯】':'体育资讯'}}</span>

                                            {{item.title}}
                                        </p>
                                        <p v-else-if="item.mtype=='2'" style="color: #00000c;font-weight: bold;">
                                            <!--<span class="isreturn" v-if="item.isreturn==1">不对返还</span>-->
                                            <span class="isreturn mr-5" v-if="item.saletype==1">包时{{baodays}}天</span>
                                            <span class="isreturn" style="background-color: #4482E4;border: 0.5px solid #4482E4;" :class="{'isreturnColor': item.isreturn!=1}"  @click.stop="showReturn(item.isreturn)">{{item.isreturn!=1?'【体育资讯】':'体育资讯'}}</span>
                                            {{item.title}}
                                        </p>
                                        <p v-else-if="item.mtype=='3'" style="color: #4482e4;font-weight: bold;">
                                            <!--<span class="isreturn" v-if="item.isreturn==1">不对返还</span>-->
                                            <span class="isreturn mr-5" v-if="item.saletype==1">包时{{baodays}}天</span>
                                            <span class="isreturn" style="background-color: #4482E4;border: 0.5px solid #4482E4;" :class="{'isreturnColor': item.isreturn!=1}"  @click.stop="showReturn(item.isreturn)">{{item.isreturn!=1?'【体育资讯】':'体育资讯'}}</span>
                                            {{item.title}}
                                        </p>
                                        <!--<p v-else style="color: #558136;">-->
                                        <p v-else style="color: #28636b;">
                                            <!--<span class="isreturn" v-if="item.isreturn==1">不对返还</span>-->
                                            <span class="isreturn mr-5" v-if="item.saletype==1">包时{{baodays}}天</span>
                                            <span class="isreturn" style="background-color: #4482E4;border: 0.5px solid #4482E4;" :class="{'isreturnColor': item.isreturn!=1}"  @click.stop="showReturn(item.isreturn)">{{item.isreturn!=1?'【体育资讯】':'体育资讯'}}</span>
                                            {{item.title}}
                                        </p>
                                    </div>
                                    <div class="right"><p class="red_ft">{{item.price}}</p></div>
                                </div>
                                <div v-if="item.gametime" style=" text-align: right; color: #ff0101;">比赛时间：{{item.gametime}}</div>
                            </div>
                        </li>
                    </van-list>
                </ul>
            </div>
        </div>
        <div class="popslerweima" v-if="showerweima" @click="showqrcode()" >
            <img :src="Url+homeerweima"  @touchstart.prevent="qrcodeimgStart()" @touchend.prevent="qrcodeimgEnd()"  ref="qrcode"/>
        </div>
        <div class="seller-details_bar noticebar" v-if="mbtsbutton==1" @click="showgzerwm()"><a class="update"><span>接收推送</span></a></div>
        <div v-if="showcode01" class="pop">
            <div class="popmain">
                <div class="titlepop">接收消息通知</div>
                <div class="usermsg">
                    <img :src="user.avatar"/>
                    <div class="usermsg_r">
                        <div class="name">{{user.nickname}}</div>
                        <div class="tips">关注<span>“红料大全”</span>，就能第一时间收到我的更新推送哦～</div>
                    </div>
                </div>
                <img :src="Url+erweimagz" class="guanzhucode"/>
                <div class="tips01">↑↑长按识别二维码，订阅推送消息</div>
                <img src="../../assets/img/closeicon.png" class="closeicon" @click="showcode01=false"/>
            </div>
        </div>
    </div>
</template>

<script>
    import QrCode from 'qrcode-decoder';
    import { ImagePreview } from 'vant';
    export default {
        name: "",
        data(){
            return {
                userid:"",
                loading: false,
                finished: false,
                page:0,
                user:"",
                list:[],
                materialsnumber:0,
                showerweima:false,
                homeerweima:'',
                foucsstatus:"",
                mbtsbutton:"",   //是否显示关注公主号按钮   1 显示  0 不显示
                erweimagz:"",    //关注二维码
                showcode01:false,
                users_gz:"",
                Loop:null
            }
        },
        components: {
            [ImagePreview.Component.name]: ImagePreview.Component,
        },
        mounted(){
            this.userid=this.$route.params.id;
            var token= localStorage.getItem("token");
            // console.log("token:"+token);
            if(!token){
                this.onloads()
            }else {
                this.onLoad();
                this.slerweima();
                this.getgzherweima()
            }

        },
        methods:{
            /* 不对返还 */
            showReturn(type){
                if(type != 1) return false;
                this.$dialog.confirm({
                    title: '温馨提示',
                    message: '不对返还',
                    showCancelButton: false,
                    overlayStyle: {backgroundColor: 'black'}
                })
                    .then(() => {
                        // on confirm
                    })
            },
            /* 展示图片 */
            showImg(imgUrl){
                ImagePreview([this.Url + imgUrl]);
            },
            //  长按识别二维码 开始
            qrcodeimgStart:function () {
                var that=this;
                clearTimeout(this.Loop); //再次清空定时器，防止重复注册定时器
                this.Loop = setTimeout(function() {
                    that.$dialog.confirm({
                        message: '识别图中二维码',
                    }).then(() => {
                        // on confirm
                        var qr = new QrCode();

                        let img = this.$refs['qrcode']
                        console.log(img);
                        qr.decodeFromImage(img,{
                            crossOrigin: "anonymous"
                        }).then((res) => {
                            console.log(res.data);
                            var ress=res.data;
                            var url = that.Url + 'api' + ress.match(/api(\S*)/)[1];
                            location.href=url;
                        });
                    })
                    .catch(() => {
                        // on cancel
                    });

                }.bind(this), 1000);
            },
            //  长按识别二维码 结束
            qrcodeimgEnd(){
                clearTimeout(this.Loop);
            },
            //点击接收推送按钮
            showgzerwm(){
                this.showcode01=true;
            },
            getgzherweima(){
                var that=this;


                that.request1.get1({
                    url: that.Url + "api/user.index/showgzherweima",
                    params: {
                        userid: that.userid
                    },
                    success: function (res) {
                        if (res.data.code == 1) {
                            that.erweimagz=res.data.data.gzherweima;
                            that.users_gz=res.data.data.user;
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            },
            onloads(){
                var that=this;
                var ua = navigator.userAgent.toLowerCase();//获取判断用的对象

                if (ua.match(/MicroMessenger/i) == "micromessenger") {
                    console.log("wx打开");
                    this.getCode();
                }else {
                    console.log("h5打开");
                    that.$router.push("/log/login")
                }
            },
            getCode () {
                var that=this;
                var local = window.location.href;// 获取页面url
                that.code = that.getUrlCode().code; // 截取code
                if (that.code == null || that.code === '') { // 如果没有code，则去请求
                    that.$axios.post(that.Url+'api/index/getAppid',{
                        params:{},
                    }).then(function(res){
//                  console.log(res.data.data)
                        if(res.data.code==1){
                            let ress=res.data.data;
                            let appid = ress.appid;
                            console.log("appid:"+appid)
                            window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
                        }
                    }).catch(function (error) {
                        console.log(error)
                    });
                } else {
                    that.login()
                }
                that.$axios.post(that.Url+'api/user.index/third',{code:that.code}
                ).then(function(res){
                    console.log(res);
                    if(res.data.code==1){
                        localStorage.setItem('token', res.data.data.userinfo.token);
                        that.homeShow();
                        that.slerweima();
                    }
                }).catch(function (error) {
                    console.log(error)
                });
            },
            getUrlCode() { // 截取url中的code方法
                var url = location.search;
                this.winUrl = url;
                var theRequest = new Object();
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    var strs = str.split("&");
                    for(var i = 0; i < strs.length; i ++) {
                        theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1]);
                    }
                }
                return theRequest
            },
            login(){
                var that=this;
                that.$axios.post(that.Url+'api/user.index/third',{code:that.code}
                ).then(function(res){
                    console.log(res);
                    if(res.data.code==1){
                        localStorage.setItem('token', res.data.data.userinfo.token);
                        that.homeShow();
                        that.slerweima();
                    }
                }).catch(function (error) {
                    console.log(error)
                });
            },
            guanzhu(){
                var that=this;

                that.request1.post1({
                    url: that.Url + "api/user.index/focusSave",
                    params: {focusid:that.userid },
                    success: function (res) {
                        if (res.data.code == 1) {
                            that.homeShow();
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            },
            // 显示/隐藏二维码
            showqrcode(){
                this.showerweima=this.showerweima?false:true;
            },
            //防失联二维码
            slerweima(){
                var that=this;
                that.request1.post1({
                    url: that.Url + "api/user.index/slerweima",
                    params: {userid:that.userid },
                    success: function (res) {
                        console.log(res)
                        if (res.data.code == 1) {
                            that.homeerweima=res.data.data.homeerweima;
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            },
            //触底加载更多
            onLoad() {
                // 异步更新数据
                this.page++;
                this.homeShow();
            },
            homeShow(){
                this.loading = true;
                var that=this;
                that.request1.post1({
                    url: that.Url + "api/user.index/homeShow",
                    params: {
                        userid:that.userid,
                       page:that.page
                    },
                    success: function (res) {
                        // console.log(res)
                        if (res.data.code == 1) {
                            that.mbtsbutton=res.data.data.mbtsbutton;
                            that.foucsstatus=res.data.data.foucsstatus;
                            that.materialsnumber=res.data.data.materialsnumber;
                            that.user=res.data.data.user;
                            // that.list=res.data.data.materials;
                           var ress=res.data.data.materials;
                            if (that.page >= res.data.data.allpage) {
                               // 加载结束
                                that.list.push.apply(that.list,ress)
                               that.finished = true;
                           }else {
                               that.list.push.apply(that.list,ress)
                               that.loading = false;
                           }
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            },
            detail(id){
                this.$router.push({ path:'/Wodeliao/womaideliaoxq/'+id})
            }
        }
    }
</script>

<style scoped>
    .mr-5{
        margin-right: 5px;
    }

    .pop{
        width: 100%;
        height:100%;
        background: rgba(0,0,0,0.6);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9;
    }
    .pop .popmain{
        width: 80%;
        height: 420px;
        background: #fff;
        border-radius: 5px;
        position: absolute;
        left: 10%;
        top: calc(50% - 210px);
        padding: 12px;
        box-sizing: border-box;
    }
    .pop .popmain .closeicon{
        position: absolute;
        right: 16px;
        top: 20px;
        width: 14px;
        height: 14px;
    }
    .pop .popmain .titlepop{
        position: relative;
        text-align: center;
        font-size: 16px;
        line-height: 36px;
    }
    .pop .popmain .usermsg{
        width: 94%;
        display: flex;
        flex-flow: row;
        align-items: flex-start;
        justify-content: space-between;
        margin: 20px auto;
    }
    .pop .popmain .usermsg img{
        width: 52px;
        height: 52px;
        border-radius: 50%;
    }
    .pop .popmain .usermsg .usermsg_r{
        width: calc(100% - 62px);
    }
    .pop .popmain .usermsg .usermsg_r .name{
        font-size: 14px;
        line-height: 36px;
    }
    .pop .popmain .tips{
        border: 1px solid #ebd9a0;
        background: #faf3d8;
        width: 100%;
        padding: 4px 10px;
        box-sizing: border-box;
        border-radius: 4px;
    }
    .pop .popmain .tips span{
        color: red;
    }
    .pop .popmain .guanzhucode{
        width: 148px;
        height: 148px;
        display: block;
        margin:28px auto 0;
    }
    .pop .popmain .tips01{
        width: 100%;
        line-height: 28px;
        margin:20px auto;
        text-align: center;
        background: #fdfbb9;
        border-radius: 14px;
        color: #ca7952;
        font-size: 14px;
    }
    .seller-details_bar {
        height: 36px;
        width: 56px;
        position: fixed;
        bottom: 15px;
        right: 15px;
        padding-top: 20px;
        background: url() #fc5d4d no-repeat center 11px;
        background-size: 14px;
        border-radius: 100px;
    }
    .seller-details_bar a {
        display: block;
        height: 36px;
        line-height: 30px;
        width: 56px;
        color: #fff;
        font-size: 12px;
        text-align: center;
    }
    .seller-details_bar a span {
        display: inline-block;
    }
    .seller-details_bar.noticebar{
        background: url("../../assets/img/noticeicon.png") #4482e4 no-repeat center 10px;
        bottom: 24px;
        right: 15px;
        border: 4px solid #b3cffc;
    }
    .personal-homepage {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 1;
    }
    .personal-homepage .user {
        background: #fff;
        width: 100%;
        overflow: hidden;
        padding-bottom: 10px;
        height: 118px;
    }
    .personal-homepage .user .user_box {
        display: -webkit-box;
        position: relative;
    }
    .personal-homepage .user .user-box-left{
        position: absolute;
        top: 2%;
        left: 8%;
        z-index: 9;
    }
    .personal-homepage .user .user-box-right{
        position: absolute;
        top: 2%;
        right: 8%;
        z-index: 9;
    }
    .personal-homepage .user .user_box > div.d1 {
        width: 50px;
        padding-left: 30px;
        font-size: 13px;
        color: #999;
        margin-top: 40px;
        margin-left: 6%;
        border-radius: 4px;
        height: 30px;
        line-height: 30px;
        background: url() 8px no-repeat;
        background-size: 16px;
        border: 1px dashed #e7e7e9;
    }
    .personal-homepage .user .user_box .img {
        width: 100%;
        -webkit-box-flex: 1;
        margin-top: 10px;
    }
    .personal-homepage .user .user_box .img img {
        width: 60px;
        height: 60px;
        display: block;
        border-radius: 30px;
        margin: 0 auto;
    }
    .personal-homepage .user .user_box > div.d2 {
        width: 80px;
        background: #4482e4;
        height: 30px;
        border-radius: 4px;
        text-align: center;
        line-height: 30px;
        font-size: 13px;
        color: #fff;
        margin: 40px 6% 0 0;
    }
    .personal-homepage .user .user_box > div.d2.active {
        background: #d9d9d9;
    }
    .personal-homepage .user p.p1 {
        margin-top: 4px;
        font-weight: 700;
        font-size: 16px;
        text-align: center;
    }
    .personal-homepage .user p.p2 {
        margin-top: 2px;
        font-size: 13px;
        color: #999;
        text-align: center;
    }
    .personal-homepage .user_bar {
        height: 40px;
        box-shadow: 0 5px 10px rgba(0,0,0,.04);
        background: #fff;
        border-top: .5px solid #efeff4;
        display: -webkit-box;
        width: 100%;
    }
    .personal-homepage .user_bar .number {
        -webkit-box-flex: 1;
        height: 37px;
        line-height: 37px;
        font-weight: 700;
        text-align: center;
        font-size: 12px;
        margin: 0 15px;
        border-bottom: 3px solid #fff;
    }
    .personal-homepage-list .my-data ul {
        margin-bottom: 80px;
        margin-top: 177px;
    }
    .my-data ul {
        display: block;
        margin-top: 100px;
        margin-bottom: 80px;
    }
    .personal-homepage-list .my-data ul {
        margin-bottom: 80px;
        margin-top: 177px;
    }
    .box-r4, .red_btn {
        border-radius: 4px;
    }
    .box-r4 {
        display: block;
        background: #fff;
        margin: 7px 10px 0;
        padding: 0 15px;
        overflow: hidden;
    }
    .my-data ul li {
        display: block;
        position: relative;
    }
    .personal-homepage-list .my-data .box-r4 {
        padding: 10px 15px;
        position: relative;
    }
    .my-data ul li .open_icon {
        position: absolute;
        top: 0;
        left: 0;
        width: 22px;
        height: 22px;
        border-radius: 4px 0 0 0;
        overflow: hidden;
    }
    .personal-homepage-list .my-data .box-r4 .open_icon {
        position: absolute;
        top: 0;
        left: 0;
        width: 22px;
        height: 22px;
        border-radius: 4px 0 0 0;
        overflow: hidden;
    }
    .my-data ul li .open_icon img {
        display: block;
        width: 22px;
    }
    .personal-homepage-list .my-data .box-r4 .open_icon img {
        display: block;
        width: 22px;
    }
    .my-data ul li .my-data_title {
        display: -webkit-box;
        padding-top: 8px;
        line-height: 22px;
        margin-bottom: 5px;
    }
    .personal-homepage-list .my-data .box-r4 .my-data_title {
        padding-top: 0;
    }
    .my-data ul li .my-data_title .top {
        width: 100%;
        position: relative;
    }
    .my-data ul li .my-data_title .time {
        float: left;
        color: #999;
        font-size: 12px;
    }
    .my-data ul li .my-data_title .left {
        -webkit-box-flex: 1;
    }
    .my-data ul li .my-data_title .left p {
        display: block;
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
    }
    .my-data_title .left p .isreturn{
        border: 0.5px solid #ef4433;
        background: #ef4433;
        border-radius:5px;
        color: #fff;
        font-size: 12px;
        padding: 1px 6px;
    }
    .my-data ul li .my-data_title .right {
        width: 75px;
    }
    .red_ft {
        color: #fc5d4d !important;
    }
    .my-data ul li .my-data_title .right p {
        display: block;
        line-height: 22px;
        text-align: right;
        font-weight: 700;
        font-size: 18px;
    }
    .my-data ul li .my-data_title .time i {
        display: inline-block;
        font-style: normal;
        height: 18px;
        line-height: 18px;
        margin-right: 6px;
    }
    .my-data ul li .my-data_title .time i.i_1 {
        border: .5px solid #ef4433;
        background: #ef4433;
        border-radius: 2px;
        padding: 0 3px;
        color: #fff;
    }
    .my-data ul li .my-data_title .time i.i_2 {
        border: .5px solid #707070;
        background: #707070;
        color: #fff;
        border-radius: 2px;
        padding: 0 3px;
    }
    .my-data ul li .my-data_title .time i.i_3 {
        border: .5px solid #4482e4;
        background: #4482e4;
        border-radius: 2px;
        padding: 0 3px;
        color: #fff;
    }
    .my-data ul li .my-data_title .left p span.s1 {
        background: #fc5d4d;
    }
    .my-data ul li .my-data_title .left p span.s1, .my-data ul li .my-data_title .left p span.s2 {
        font-weight: 400;
        display: inline-block;
        border-radius: 4px;
        font-size: 12px;
        color: #fff;
        padding: 0 5px;
        line-height: 20px;
        margin-right: 5px;
    }
    .my-data ul .quanbu {
        text-align: center;
        font-size: 12px;
        color: #999;
        line-height: 60px;
    }
    .popslerweima{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height:100%;
        background: rgba(0,0,0,0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 99;
    }
    .popslerweima img{
        max-width: 100%;
        max-height: 100%;
    }
</style>